<template>
	<div class="info">
		<div class="popup">
			<h2>信息确认</h2>
			<div class="data">
				<div class="item" v-for="(value, key) in dataEnum" :key="key">
					<p>{{ value }}：</p>
					<p class="font-weight">{{ loginInfo?.[key] ?? '-' }}</p>
				</div>
			</div>

			<div class="btn">
				<van-button
					block
					type="primary"
					@click="toMenu"
				>
					确定
				</van-button>
			</div>

			<van-image
				:src="require('./image/icon_close.png')"
				@click="onClose"
			/>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useLoginStore } from '@/store/index'
import { storeToRefs } from 'pinia'
import { loginInfoConfirm } from '@/service/village'

const loginStore = useLoginStore()
const router = useRouter()
const route = useRoute()

const { loginInfo } = storeToRefs(loginStore)
const dataEnum = ref({
	'uname': '用户名',
	'nickName': '姓名',
	'region': '行政区划',
})

const toMenu = async () => {
	try {
		const result = await loginInfoConfirm({
			id: route.query.id
		})
		if (result?.succ) {
			router.push({
				name: 'menu'
			})
		}
	} catch (e) {
	}
}

const onClose = () => {
	router.back()
}

</script>

<style scoped lang="less">
.info {
	position: relative;
	height: 100%;
	background: url(image/page_bg.png) no-repeat top center / 100% 100%;
	.popup {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
		width: 630px;
		height: 744px;
		background: #fff;
		border-radius: 16px;
		h2 {
			margin-top: 56px;
			text-align: center;
			font-size: 36px;
		}
		.data {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 32px 56px 64px;
			p {
				min-height: 40px;
				line-height: 40px;
				&:nth-of-type(1) {
					color: #1A2735;
					margin-bottom: 8px;
				}
				&:nth-of-type(2) {
					background: #EFF3F6;
					padding: 12px 24px;
				}
			}
		}
		.btn {
			margin: 0 56px;
		}
		.van-image {
			position: absolute;
			width: 72px;
			bottom: -120px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
